<template>
    <div style="background-color: white; padding: 15px">
      <div>
        <i class="icon-fanhui" style="color: #2A97F9;cursor: pointer;margin-right: 10px" @click="goBack"></i>
        <span style="color: #435B77; font-weight: 600">发布消息</span>
      </div>
      <el-form :model="form" :rules="rules" ref="form" label-width="125px" class="demo-ruleForm" label-position="left">
        <el-form-item label="标题：" prop="title" style="width: 400px" >
          <el-input v-model="form.title" size="small"></el-input>
        </el-form-item>
        <el-form-item label="发布内容：" prop="content" >
          <Editor ref="childEdit" :height="220" :catchData="getContent" :htmlContent="form.content"></Editor>
        </el-form-item>
        <el-form-item label="选择发送方式：" prop="isDelayed" class="radio">
          <el-radio v-model="form.isDelayed" :label="true">定时发送</el-radio>
          <el-radio v-model="form.isDelayed" :label="false">立即发送</el-radio>
        </el-form-item>
        <div style="margin-top: -16px">
          <el-date-picker
            style="margin-left: 125px"
            v-if="form.isDelayed"
            v-model="form.destineSendTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <el-form-item style="margin-top: 20px">
          <el-button @click="submitForm('form')" type="primary" style="margin-right: 15px">保 存</el-button>
          <el-button @click="cancelForm">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    import Editor from '@/components/ueditor/index'
    import {centerPlatform} from '@/api/message'
    export default {
        name: "addMessage",
        components: {
            Editor
        },
        data() {
            return {
                form: {
                    title: '',
                    content: '',
                    isDelayed: true,
                    destineSendTime: ''
                },
                rules: {
                    title: [
                        { required: true, message: '请输入消息标题', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入发布内容', trigger: 'blur' }
                    ],
                    isDelayed: [
                        { required: true, message: '请选择发送方式', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            //获取富文本内容
            getContent(content) {
                this.form.content = encodeURIComponent(content);
            },
            submitForm(formName) {
                console.log(this.form)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.form.isDelayed && this.form.destineSendTime == '') {
                            this.$message({
                                type: 'error',
                                message: '请选择推送时间'
                            })
                            return
                        } else {
                            centerPlatform(this.form).then(res => {
                                if(res.data.success) {
                                    this.$message({
                                        type:'success',
                                        message: res.data.msg
                                    })
                                    this.$router.go(-1)
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            cancelForm() {
                this.$router.go(-1)
            },
            goBack() {
                this.$router.go(-1)
            }
        }
    }
</script>
<style lang="scss">
.radio{
  .el-radio{
    margin-right: 20px;
  }
}
</style>

<style scoped>

</style>
